<link rel="stylesheet" href="__STATIC__/style/login.css" media="all">
<style>
    .layui-fluid{
        padding: 0px;
    }
    .logo{width:60px;margin:10px 6px;height:auto;}
    .layadmin-link{color: #319cea!important;}
    .layui-form-checkbox[lay-skin=primary]:hover i {
        border-color: #319cea;
        color: #fff
    }
    .layui-form-checked[lay-skin=primary] i {
        border-color: #319cea;
        background-color: #319cea;
        color: #fff
    }
    .layui-btn {
        height:45px;
        border-radius: 4px;
        background-color: #319cea;
        margin-top:20px;
    }
    .layui-input{
        height:45px;
        border-radius: 4px;
    }
    .layui-input:hover{
        border-color: #00a0e8!important;
    }
    .layadmin-user-login-header p {
        color:#3c5e77;
        font-size:18px;
        margin-bottom:10px;
    }
    /*flex布局*/
    #LAY-user-login{
        padding:0;
        display:flex !important;
        justify-content: space-between;
        align-items: center;
        height:100%;
        background-image: url('/images/login-bg.jpg');
    }
    .layadmin-user-login-main{
        background: #fff;
        margin-right: 200px;
    }
</style>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login">
    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header" style="padding-bottom: 0px;">
            <p style="margin-bottom: 0px;font-size: 20px;">找回密码</p>
        </div>
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-cellphone" for="cellphone"></label>
                <input type="text" name="mobile" id="cellphone" lay-verify="phone" placeholder="手机号" class="layui-input">
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-smscode"></label>
                        <input type="text" name="code" id="LAY-user-login-smscode" lay-verify="required" placeholder="验证码" class="layui-input">
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 10px;">
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" id="code" style="margin-top:0;color:#FFF;">获取验证码</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                <input type="password" name="password" id="LAY-user-login-password" lay-verify="required|pass" placeholder="新密码" class="layui-input">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-repass"></label>
                <input type="password" name="repassword" id="LAY-user-login-repass" lay-verify="required" placeholder="确认密码" class="layui-input">
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-forget-submit">提 交</button>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use('form', function(){
        var form = layui.form;
        form.render();

        form.on('submit(LAY-user-forget-submit)', function(data){
            var field = data.field; //获取提交的字段
            if(field.password.length<6 ||field.password.length>20 ){
                return layer.msg('密码长度介于6-20之间',{time:1000});
            }
            if(field.password !== field.repassword){
                return layer.msg('两次密码输入不一致',{time:1000});
            }
            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.post("{:url('admin/site/forget')}",field,function (ret) {
                if (ret.code == 0){
                    layer.msg(ret.msg,{time:1000},function () {
                        window.location.href = "{:url('admin/site/logout')}";
                    })
                }else{
                    layer.msg(ret.msg,{time:1000})
                }
            });
        });

        //点击获取验证码时校验手机号
        var int=59;
        function getCode(){
            $("#code").attr("disabled",'disabled');
            i = self.setInterval(function () {
                $('#code').attr("disabled",'disabled').text(int + "秒后重新发送");
                int--;
                if(int<0){
                    window.clearInterval(i);
                    int = 59; //重新赋值
                    $("#code").removeAttr("disabled").text("重新获取校验码");//将按钮可用
                }
            }, 1000);
        }


        //发送验证码
        $('#code').click(function(){
            if($(this).attr('disabled') == 'disabled'){
                return false;
            }
            var account = $('#cellphone').val();
            if(account == ''){
                layer.msg('联系电话不能为空',{time:1000});return false;
            }
            var pattern = /^1[34578]\d{9}$/;
            if(!pattern.test(account)){
                layer.msg('联系电话格式错误',{time:1000}); return false;
            }
            var url="{:url('admin/SendCode/sendCode')}";
            if($(this).attr('disabled') == 'disabled'){
                layer.msg('请稍后再试');return false;
            }else {
                $.post(url, {mobile: account}, function (res) {
                    getCode();
                    if (res.code == 0) {
                        layer.msg('短信发送成功',{time:1000});
                    } else {
                        layer.msg(res.msg,{time:1000});
                    }
                })
            }
        });

    });
</script>
